{% extends 'base.html' %}
{% block content %}
<form class="layui-form" method="post" action="{% url 'addBook' %}" style="margin-top:150px">
    {% csrf_token %}
    <div class="layui-form-item">
      <label class="layui-form-label">书籍名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required  lay-verify="required" placeholder="请输入书籍名称" autocomplete="off" class="layui-input">
      </div>
    </div>
  
    <div class="layui-form-item">
      <label class="layui-form-label">作者</label>
      <div class="layui-input-block">
        <input type="text" name="author" required  lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
      </div>
    </div>
  
    <div class="layui-form-item">
      <label class="layui-form-label">价格</label>
      <div class="layui-input-block">
        <input type="text" name="price" required  lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
      </div>
    </div>
  
    <div class="layui-form-item">
      <label class="layui-form-label">出版社</label>
      <div class="layui-input-block">
        <input type="text" name="publisher" required  lay-verify="required" placeholder="请输入出版社" autocomplete="off" class="layui-input">
      </div>
    </div>
  
  
    <div class="layui-form-item">
      <label class="layui-form-label">出版时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" name="pub_date" id="test1" placeholder="yyyy-MM-dd">
      </div>
    </div>
  
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">简介</label>
      <div class="layui-input-block">
        <textarea name="abstract" placeholder="请输入内容" class="layui-textarea"></textarea>
      </div>
    </div>
  
    <div class="layui-form-item" hidden>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" name="img_url" id="img_url">
      </div>
    </div>
  
  
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">图书封面</label>
      <img width="150px" height="150px" id="showimg" src="" alt="">
      <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
      <div class="layui-inline layui-word-aux">
        这里以限制 60KB 为例
        <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="yes">
          <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
        </div>
      </div>
    </div>
  
  
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button id="btn1" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
{% endblock %}
{% block js %}
<script>
    layui.use(['form','laydate','upload'], function(){
      var form = layui.form;
      var laydate = layui.laydate;
      var upload = layui.upload;
      var element = layui.element;
      $ = layui.$;

      //监听提交
      form.on('submit(formDemo)', function(data){

      });

      //这个是日期选择器启动js
      laydate.render({
        elem:"#test1" //指定袁术
      });


      //设定文件大小限制
      <!-- 返回的必须是json数据，否则就一直报错 -->
      upload.render({
        elem: '#test7'
        ,url: "{% url 'upload' %}" //此处配置你自己的上传接口即可
        ,size: 600000 //限制文件大小，单位 KB
        ,exts: "png|jpg|jepg"
        //上传成功后回调
        ,done: function(res){
          $("#showimg").attr("src",res.info)
          $("#img_url").val(res.info)
        }
        //上传错误回调
        ,error: function(err){
          console.log("失败" + err)
        }
        //选择文件后
        ,choose:function(n,elem,res,index){
          var pn = '0%'
          element.progress('demo',pn)
          layer.msg("上传中....",{icon:16})
        }
         //上传进度条方法
        ,progress:function(n,elem,res,index){
          layer.msg(n)
          var percent = n + '%' //获取进度百分比
          element.progress('demo',percent) //可配合layui进度条元素使用
          element.progress('demo-'+index,n+'%');//进度条
          if(n == 100){
            layer.msg('上传完毕',{icon:1});
          }
        }
      });

    });
</script>
{% endblock %}